<script setup>
import { ref } from 'vue'
const value = ref(new Date())
// 定义表单数据和健身方案
const form = ref({
  goal: '',
  frequency: 1,
  duration: 30,
});

const userData = ref({
  height: null,
  weight: null,
});
const bmi = ref(null);
const status = ref('');
const bmiData = [{}]; // 数据为空，因为我们不需要显示实际内容

const plan = ref(null);

// 生成健身方案的方法
const generatePlan = () => {
  plan.value = {
    goal: form.value.goal,
    frequency: form.value.frequency,
    duration: form.value.duration,
    suggestion: getSuggestion(form.value.goal),
  };
};

// 根据目标返回建议
const getSuggestion = (goal) => {
  switch (goal) {
    case 'weight_loss':
      return '建议结合有氧运动和力量训练，每周至少3次。';
    case 'muscle_gain':
      return '建议以力量训练为主，每周至少4次，增加蛋白质摄入。';
    case 'endurance':
      return '建议进行有氧训练，如跑步、游泳，每周5次。';
    default:
      return '';
  }
};

// 计算 BMI
const calculateBMI = () => {
  if (userData.value.height && userData.value.weight) {
    const heightInMeters = userData.value.height / 100; // 转换为米
    bmi.value = (userData.value.weight / (heightInMeters ** 2)).toFixed(2);
    status.value = getStatus(bmi.value);
  } else {
    alert('请输入身高和体重。');
  }
};
// 根据 BMI 值返回健康状态
const getStatus = (bmiValue) => {
  if (bmiValue < 18.5) return '体重过轻';
  else if (bmiValue >= 18.5 && bmiValue < 24.9) return '正常体重';
  else if (bmiValue >= 25 && bmiValue < 29.9) return '超重';
  else return '肥胖';
};
</script>


<template>
<div class="card-container">
    <el-card class=" divide15" style="width: 400px;">
        <h2>BMI 计算器</h2>
        <el-form :model="userData" ref="form">
            <el-form-item label="身高 (厘米)" prop="height">
                <el-input-number v-model="userData.height" :min="50" :max="250" label="身高"></el-input-number>
            </el-form-item>

            <el-form-item label="体重 (千克)" prop="weight">
                <el-input-number v-model="userData.weight" :min="20" :max="300" label="体重"></el-input-number>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="calculateBMI">计算 BMI</el-button>
            </el-form-item>
        </el-form>

        <div v-if="bmi !== null" class="bmi-result">
            <h3>BMI 结果</h3>
            <p><strong>BMI 值：</strong>{{ bmi }}</p>
            <p><strong>健康状态：</strong>{{ status }}</p>
        </div>
    </el-card>
    
    <el-card class=" divide15 " style="width: 50%;">
        <template #header>
            <div class="card-header">
                <b style="color: violet;">好友列表</b>
                <img src="@/assets/image/friend.png" alt="" style="width: 30px; height: 30px;" />
            </div>
        </template>
        
        <el-col :span="19"  style="margin-left: 10px;">
          <el-card v-for="post in posts" :key="post.id" class="post-card" @click="handleClick(post.id)">
            
                <div class="header no-underline">
                    <h3>{{ post.title }}</h3>
                    <p class="timestamp no-underline" >{{formatDate(post.updateTime)}}</p>
                </div>
              <p class="summary" v-html="truncateRichText(post.summary, 40)"></p>
            
          </el-card>
          <!-- 分页 -->
          <el-pagination background layout="prev, pager, next" :total="totalPosts" @current-change="handlePageChange"/>
        </el-col>
        
        
        <el-table :data="bmiData" border style="width: 1200px;">
            <!-- 表头 -->
            <el-table-column  label="成年人身体质量指数" align="center" :colspan="4" >
      
                <!-- 轻体重 -->
                <el-table-column label="轻体重BMI"  align="center">
                  <template #default>
                    <b>BMI &lt; 18.5</b>
                  </template>
                </el-table-column>

                <!-- 健康体重 -->
                <el-table-column label="健康体重BMI"  align="center" >
                  <template #default>
                    <b style="color: green;">18.5 ≤ BMI &lt; 24</b>
                  </template>
                </el-table-column>

                <!-- 超重 -->
                <el-table-column label="超重BMI"  align="center">
                  <template #default>
                    <b>24 ≤ BMI &lt; 28</b>
                  </template>
                </el-table-column>

                <!-- 肥胖 -->
                <el-table-column label="肥胖BMI"  align="center">
                  <template #default>
                    <b>28 ≤ BMI</b>
                  </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </el-card>
</div>

    <el-card class=" divide15 ">
        <template #header>
            <div class="card-header">
                <b style="color: violet;">BMI</b>
            </div>
        </template>
        <div class="illus float-left"><img src="https://s.boohee.cn/images/tool/bmi-icon.gif" alt="" />
        </div>
        <div class="intr float-right">
            <p><b>Body Mass Index</b>&nbsp;&nbsp;即BMI指数，也叫身体质量指数，是衡量是否肥胖和标准体重的重要指标。</p>
            <p>适用范围：18至65岁的人士。儿童、发育中的青少年、孕妇、乳母、老人及身型健硕的运动员除外。</p>
            <p>世界卫生组织认为BMI指数保持在<b>22</b>左右是比较理想的。</p>
        </div>
        
        
        <el-table :data="bmiData" border style="width: 100%">
            <!-- 表头 -->
            <el-table-column  label="成年人身体质量指数" align="center" :colspan="4" >
      
                <!-- 轻体重 -->
                <el-table-column label="轻体重BMI"  align="center">
                  <template #default>
                    <b>BMI &lt; 18.5</b>
                  </template>
                </el-table-column>

                <!-- 健康体重 -->
                <el-table-column label="健康体重BMI"  align="center" >
                  <template #default>
                    <b style="color: green;">18.5 ≤ BMI &lt; 24</b>
                  </template>
                </el-table-column>

                <!-- 超重 -->
                <el-table-column label="超重BMI"  align="center">
                  <template #default>
                    <b>24 ≤ BMI &lt; 28</b>
                  </template>
                </el-table-column>

                <!-- 肥胖 -->
                <el-table-column label="肥胖BMI"  align="center">
                  <template #default>
                    <b>28 ≤ BMI</b>
                  </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </el-card>





    <el-card class="divide2 divide15">
        <h2>好友列表</h2>
        <el-form :model="userData" ref="form">
            <el-form-item label="身高 (厘米)" prop="height">
                <el-input-number v-model="userData.height" :min="50" :max="250" label="身高"></el-input-number>
            </el-form-item>

            <el-form-item label="体重 (千克)" prop="weight">
                <el-input-number v-model="userData.weight" :min="20" :max="300" label="体重"></el-input-number>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="calculateBMI">计算 BMI</el-button>
            </el-form-item>
        </el-form>

        <div v-if="bmi !== null" class="bmi-result">
            <h3>BMI 结果</h3>
            <p><strong>BMI 值：</strong>{{ bmi }}</p>
            <p><strong>健康状态：</strong>{{ status }}</p>
        </div>
    </el-card>

    <el-card class="divide2 divide15">
        <el-form :model="form" ref="form">
            <el-form-item label="健身目标" prop="goal">
                <el-select v-model="form.goal" placeholder="选择健身目标">
                    <el-option label="减脂" value="weight_loss"></el-option>
                    <el-option label="增肌" value="muscle_gain"></el-option>
                    <el-option label="增强耐力" value="endurance"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="健身频率" prop="frequency">
                <el-input-number v-model="form.frequency" :min="1" :max="7" label="每周次数"></el-input-number>
            </el-form-item>

            <el-form-item label="时长 (分钟)" prop="duration">
                <el-input-number v-model="form.duration" :min="30" :max="180"></el-input-number>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="generatePlan">生成健身方案</el-button>
            </el-form-item>
        </el-form>

        <div v-if="plan" class="fitness-plan">
            <h3>定制健身方案</h3>
            <p><strong>目标：</strong>{{ plan.goal }}</p>
            <p><strong>频率：</strong>{{ plan.frequency }} 次/周</p>
            <p><strong>每次时长：</strong>{{ plan.duration }} 分钟</p>
            <p><strong>建议：</strong>{{ plan.suggestion }}</p>
        </div>
    </el-card>

</template>
<style lang="scss" scoped>
.fitness-plan {
  margin-top: 20px;
}


.green-label {
  color: green;
}
.card-container {
  display: flex;
  gap: 20px; /* 卡片之间的间距 */
}
.box-card {
  flex: 1; /* 控制卡片宽度相等 */
}
.divide15{
  margin-top: 20px;
  background-color: rgba(255, 255, 255, 0.3);
}
.card-header {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}
</style>